<template>
  <div>
    <Table :columns="columns"
           :showPagination="false"
           :dataSource="managersData"
           :fetch="loadManagersList"
           :options="managersOptions">
      <template #opration="{row}">
        <div class="opration">
          <a href="javascript:void(0)"
             class="a-link"
             v-if="row.identity == '普通管理员'"
             @click="del(row)">删除</a>
          <span v-else>--</span>
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
import { columns } from 'element-plus/es/components/table-v2/src/common.mjs';
import { getCurrentInstance, nextTick } from 'vue';


export default {
  data(){
    return{
      proxy: getCurrentInstance().proxy,
      columns:[{
        label: "用户名称",
        prop: "username",
      },
      {
        label: "用户身份",
        prop: "identity"
      },
      {
        label: "操作",
        prop: "opration",
        width:200,
        scopedSlots: "opration",
      }],
      managersData: {
        list :[]
      },
      managersOptions: {
        border:true,
        extHeight:10
      },
    };
  },
  methods: {
    //加载表单数据
    async loadManagersList(){
      try {
        let result = await this.proxy.Request({
          url: "/admin/managers",
          method: "GET",
        });

        if (!result){
          return;
        }
        this.managersData.list = result.data.rows;
      } catch(error){
        console.error("获取管理员数据时出错：",error)
      }
    },

    //删除管理员
    // del(data) {
    //   this.proxy.Confirm('你确定要删除该管理员吗?')
    //   console.log(data.userName)
    //   console.log(data.id)
    // }
    del(data) {
      this.proxy.Confirm('你确定要删除该管理员吗?', async() => {
        let result = await this.proxy.Request({
          url: '/admin/managers/'+data.id,
          method: "DELETE",
          params: {
            id: data.id,
          }
        })
        if (!result) {
          return;
        }
        this.loadManagersList();
      })
    }
  },
  mounted(){
    this.loadManagersList();
  },
};
</script>

<style scoped>

</style>